<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <!--<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>-->
    <link href="css/login.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="sky"></div>
<div id="head"></div>
<p style="font-size: 48px;text-align: center; color:yellow">健 身 房 管 理 系 统</p>
<div id="middle">
    <form th:action="@{/login.html}" method="post">
        <ul style="text-align: center;">
            <li><input type="text" class="name" id="username" name="username" placeholder="请输入用户名" />
            </li>
            <li><input type="password" id="password" name="password" class="pwd" placeholder="请输入密码"/>
            </li>
            <li><input type="submit" value="登录" id="login" /></li>
            <!--<li><button id="login">立即登录</button></li>-->
            <li>
                <p th:if="${loginError}" class="error" style="color: red">用户名或密码错误</p>
                <p id="err" style="display: inline-block; "></p>
            </li>

        </ul>
    </form>
</div>
<div id="cloud"></div>
<script src="components/jquery/jquery.min.js" type="text/javascript" charset="UTF-8"></script>
<script language='javascript' type='text/javascript'>
    $(document).ready(function() {
        init();
    });
    function init(){
        $(".name,.pwd,#valid").keyup(function(event){
            if( event.keyCode == 13 )
            {
                $('#login').click();
            }
        });
        $("form").submit( function(event){
            var account = $(".name").val();
            var pwd = $(".pwd").val();
            if(!account ||!pwd) {
                $("#err").css("display","inline-block");
                $("#err").text("请输入用户名或密码");
                $(".error").hide();
                return false;
            }
        });

    }

</script>


</body>
</html>

<!--<!DOCTYPE html>-->
<!--<html lang="zh" xmlns:th="http://www.thymeleaf.org">-->
<!--<head>-->
    <!--<meta charset="UTF-8">-->
    <!--<title>Login page</title>-->
<!--</head>-->
<!--<body>-->
<!--<h1>Login page</h1>-->
<!--<p th:if="${loginError}" class="error">用户名或密码错误</p>-->
<!--<form th:action="@{/login.html}" method="post">-->
    <!--<label for="username">Username</label>:-->
    <!--<input type="text" id="username" name="username" autofocus="autofocus" /> <br />-->
    <!--<label for="password">Password</label>:-->
    <!--<input type="password" id="password" name="password" /> <br />-->
    <!--<input type="submit" value="Login" />-->
<!--</form>-->
<!--</body>-->
<!--</html>-->
<!--<style>-->
<!--body{-->
<!--background:url(img/bg.png) repeat-x;-->
<!--min-height: 600px;-->
<!--position: relative;-->

<!--}-->

<!--*{font-family:"微软雅黑"; margin:0; padding:0; border:0; font-size:14px;color:white;}-->
<!--html,body{height:100%; width:100%;;}-->

<!--a{-->
<!--text-decoration: none;-->
<!--color: rgba(255, 255, 255,255);-->
<!--cursor: pointer;-->
<!--}-->


<!--.name,.pwd{-->
<!--width: 310px;-->
<!--height: 44px;-->
<!--line-height: 44px;-->
<!--padding-left: 15px;-->
<!--outline: none;-->
<!--border-radius: 20px;-->
<!--background-color: #0A3C78;-->
<!--border: 1px solid #329BE0;-->
<!--}-->
<!--.name:hover,.pwd:hover,.name:focus,.pwd:focus{-->

<!--background-color: #052b64;-->
<!--}-->

<!--#login{-->

<!--background: #3fb9ff;-->
<!--font-size: 18px;-->
<!--width: 329px;-->
<!--height: 44px;-->
<!--outline: none;-->
<!--color: white;-->
<!--background: -webkit-linear-gradient(#3fb9ff, #099be7, #229de3);-->
<!--background: -o-linear-gradient(#3fb9ff, #099be7, #229de3);-->
<!--background: -moz-linear-gradient(#3fb9ff, #099be7, #229de3);-->
<!--background: linear-gradient(#3fb9ff, #099be7, #229de3);-->
<!--border-radius: 20px;-->
<!--}-->
<!--#login:hover{-->
<!--background: -webkit-linear-gradient(#229de3, #099be7,#3fb9ff);-->
<!--background: -o-linear-gradient(#229de3, #099be7,#3fb9ff);-->
<!--background: -moz-linear-gradient(#229de3, #099be7,#3fb9ff);-->
<!--background: linear-gradient(#229de3, #099be7,#3fb9ff);-->
<!--}-->

<!--#head{-->
<!--height: 50px;-->
<!--padding-top: 25px;-->
<!--margin-left: 14px;-->
<!--}-->
<!--#middle{-->
<!--margin-top: 100px;-->
<!--/* height:600px; */-->

<!--}-->

<!--#footer a{-->
<!--color:black;-->
<!--}-->

<!--#middle li {-->
<!--list-style-type:none;-->
<!--margin-top: 15px;-->
<!--}-->

<!--#children li {-->
<!--list-style-type: none;-->
<!--height: 42px;-->
<!--line-height: 42px;-->
<!--border-bottom: 1px double rgb(5, 33, 113);-->

<!--}-->

<!--#children li a{-->
<!--color: rgba(255, 255, 255,255);-->
<!--}-->


<!--#children li:hover{-->
<!--background-color: #354d8d;-->

<!--}-->
<!--#cloud{-->
<!--background: url(img/cloud.png) repeat;-->
<!--width: 100%;-->
<!--height: 356px;-->
<!--position: absolute;-->
<!--bottom: 0px;-->
<!-- -webkit-animation: cloud 60s linear infinite alternate;-->
<!-- -moz-animation: clouds 60s linear infinite alternate;-->


<!--z-index: -10;-->

<!--}-->

<!--@-webkit-keyframes cloud {-->
<!--0%{background-position:top left}-->
<!--100%{background-position:top right}-->
<!--}-->

<!--@-moz-keyframes clouds {-->
<!--0%{background-position:top left}-->
<!--100%{background-position:top right}-->
<!--}-->

<!--#err{-->
<!--display:none;-->
<!--color:red;-->
<!--}-->
<!--#sky{-->
<!--background: url(img/sky.png) repeat;-->
<!--width: 100%;-->
<!--heigth: 462px;-->
<!--z-index: -20;-->
<!--height: 462px;-->
<!--position: absolute;-->
<!--top: 0px;-->
<!--}-->

<!--</style>-->